<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background: #f6f9fc;
			}

			.main {
				width: 240px;
				height: 460px;
				margin: 50px auto;
				background: #eae9e9;
				padding:20px;
				box-sizing: border-box;
			}
			.main ul li{
				float:left;
				list-style: none;
				width:60px;
				margin-right:10px;
				margin-bottom:10px;
				background:#424242;
				text-align: center;
				padding:8px 0;
				color:white;
				border:1px solid white;
				box-sizing: border-box;
				cursor: pointer;
				
			}
			.main ul{
				overflow: hidden;
			}
			.main ul li.active{
				border:1px solid #424242;
				color:#e84a7e;
				background:white;
			}
			.main ul li:nth-child(3n){
				margin-right:0;
			}
			.main ul li p:first-child{
				font-size: 20px;
				font-weight: 800;
			}
			.main ul li p:last-child{
				font-size:14px;
			}
			.main .content{
				width:200px;
				height:100px;
				background:#f1f1f1;
				border:1px solid white;
				padding:8px;
				box-sizing: border-box;
			}
			.main .content .month{
				margin:2px 0 8px 0;
			}
		</style>
		<script>
			let aDatas=[
				"快过年了，大家可以商量着去哪玩吧～",
				"精通JavaScript开发课程 - 结课标准 - 有十条标准可让大家修练成JS高手……",
				"HTML5开发课程，让你熟练掌握移动应用开发技术",
				"精通各种DOM类应用，熟练掌握面向对象编程思想（OOP）、熟悉JS面向对象开发方式",
				"熟练掌握AJAX技术及相关应用（例如：新浪微博级应用）",
				"可以独立写出类似jQuery的小型库（支持各类选择符、事件类、DOM、自定义动画animate、AJAX……）",
				"精通JS运动特效技术，能完整实现各类网站所有动画特效，如 智能课堂 官网 - 智能课堂 ",
				"掌握JS调试及优化技术、能兼容所有浏览器 - 智能课堂",
				"精通JS事件对象及事件的工作机制，并能完成各类跨平台应用模块的开发 - 智能课堂",
				"能独立开发表现和性能都很优秀的RIA应用 - 智能课堂",
				"了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 智能课堂",
				"熟悉正则表达式的编写、应用及高级表单验证技术 - 智能课堂"
			];
			window.onload = function (){
				let lis = document.querySelectorAll('li');
				let p = document.querySelectorAll('.main .content p')
				let m = 0;
				
				for(let i = 0; i < lis.length; i++)
				{
					lis[i].onmouseover = function()
					{
						lis[m].className = '';
						lis[i].className = 'active';
						
						p[0].innerHTML = i + 1 + '月活动';
						p[1].innerHTML = aDatas[i];
						
						m = i;
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="main">
			<ul>
				<li>
					<p>1</p>
					<p>JAN</p>
				</li>
				<li>
					<p>2</p>
					<p>FER</p>
				</li>
				<li>
					<p>3</p>
					<p>MAR</p>
				</li>
				<li>
					<p>4</p>
					<p>APR</p>
				</li>
				<li>
					<p>5</p>
					<p>MAY</p>
				</li>
				<li>
					<p>6</p>
					<p>JUN</p>
				</li>
				<li>
					<p>7</p>
					<p>JUL</p>
				</li>
				<li>
					<p>8</p>
					<p>AUG</p>
				</li>
				<li>
					<p>9</p>
					<p>SEP</p>
				</li>
				<li>
					<p>10</p>
					<p>OCT</p>
				</li>
				<li>
					<p>11</p>
					<p>NOV</p>
				</li>
				<li>
					<p>12</p>
					<p>DEC</p>
				</li>
			</ul>
			<div class="content">
				<p class="month">1月活动</p>
				<p>快过年了，大家可商量去哪里玩了~~~</p>
			</div>
		</div>
	</body>
</html>